<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>:: <?= $_SERVER["SERVER_NAME"] ?> ::</title>

<style type="text/css">

html,iframe {
  overflow: auto;
}

body {
  font: 62.5% Lucida Grande, Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
  margin: 0px;
  background: #F5F5F5;
}

/**
 * Top-level top menu bar
 */
#TopMenu {
  height: 24px;
  background-image: url('img/filter_bar_bg.png');
  border-bottom: 1px solid #979797;
  overflow: hidden;
}

#TopMenu ul {
  display: inline;
}

/**
 * Generic configuration for all items
 */
#TopMenu ul li {
  list-style-type: none;
  list-style-image: none;
  float: left;
  height: 17px;
  margin: 4px 2px 0 5px;
  vertical-align: middle;
}

#TopMenu ul li span {
  font-size: 1.2em;
  color: #4E4E4F;
  text-decoration: none;
  font-weight: bold;
  padding: 0px 7px 0px 7px;
  height: 17px;
  display: block;
  text-shadow: 1px 1px 0px white;
}

/**
 * Mouse over items
 */
#TopMenu ul#TopMenuItems li:hover,
#TopMenu ul#InfoBarItems li:hover
{
  background-image: url('img/filter_hover_left.png');
  background-repeat: no-repeat;
}

#TopMenu ul#TopMenuItems li span:hover,
#TopMenu ul#InfoBarItems li span:hover {
  cursor: pointer;
  color: white;
  background-image: url('img/filter_hover_right.png');
  background-repeat: no-repeat;
  background-position: top right;
  text-shadow: 1px 1px 0px #80868f;
}

/**
 * Selected items
 */
#TopMenu ul#TopMenuItems li.selected {
  background-image: url('img/filter_selected_left.png');
  background-repeat: no-repeat;
}

#TopMenu ul#TopMenuItems li span.selected {
  color: white;
  background-image: url('img/filter_selected_right.png');
  background-repeat: no-repeat;
  background-position: top right;
  text-shadow: 1px 1px 0px #80868f;
}

/**
 * Info bar items
 */
#TopMenu ul#InfoBarItems li {
  float: right;
  margin-right: 4px;
  opacity: 0.7;
}

/**
 * Align left/right containers with correct overlap
 */
#TopMenuItemsContainer {
  float: left;
}
#InfoBarItemsContainer {
  position: absolute;
  right: 0;
  background-image: url('img/filter_bar_bg.png');
  height: 24px;
}

</style>

<script language="JavaScript" type="text/javascript">

/* The Menu singleton.
 */
var Menu = {

  _obj : null,
  _items : [],
  _sel : -1,
  _selobj : null,
  _seliframe : null,

  getSelected : function() {
    return this._items[this._sel];
  },

  appendItem : function(itm) {
    this._items[this._items.length] = itm;
  },

  setObject : function(obj) {
    this._obj = obj;
  },

  getActiveIframe : function() {
    return this._seliframe;
  },

  draw : function() {

    // Container of all iframes
    var iframesContainer = document.getElementById("IFrames");


    // Loop over all menu items
    for (i=0; i<this._items.length; i++) {

      var li = document.createElement("li");
      var sp = document.createElement("span");
      var that = this;
      sp.setAttribute("idx", i);

      var clickHandler = function(e) {

        var obj = isIE() ? e.srcElement : this;

        // Turn previously selected item into unselected, and hide iframe
        if (that._sel != -1) {
          that._selobj.className = "";
          that._selobj.parentNode.className = "";
          that._seliframe.style.display = "none";
        }

        // If re-clicking when selected, reload frame
        var forceReload = (that._selobj == obj);

        that._sel = parseInt( obj.getAttribute("idx") );
        that._selobj = obj;
        that._seliframe = document.getElementById("Content" + that._sel); 

        if ((forceReload) ||
          (that._seliframe.getAttribute("firstVisit") == "true")) {
          that._seliframe.src = that._items[that._sel].url;
          that._seliframe.setAttribute("firstVisit", "false"); 
        }

        // Turn current item into selected, and display iframe
        obj.className = "selected";
        obj.parentNode.className = "selected";
        that._seliframe.style.display = "block";
        ResizeContentFrame();
      };

      if (isIE()) {
        sp.attachEvent("onclick", clickHandler);
      }
      else {
        sp.addEventListener("click", clickHandler, false);
      }

      sp.innerHTML = this._items[i].label.replace("!search!",
        "<img src=\"img/search.png\" style=\"vertical-align:-1px\"/>");
      li.appendChild(sp);
      this._obj.appendChild(li);

      var iframe = document.createElement("iframe");
      iframe.id = "Content" + i;
      iframe.style.display = "none";  // start as undisplayed
      iframe.frameBorder = "0";
      iframe.width = "100%";
      iframe.setAttribute("firstVisit", "true");
      iframesContainer.appendChild(iframe);

    }

  }

};

/* Identify Internet Explorer (non-standard shitty browser).
 */
var ieVer;
function isIE() {
  if (ieVer >= 0) {
    return true;
  }
  else if (ieVer < 0) {
    return false;
  }
  else {
    if (navigator.userAgent.indexOf("MSIE") > -1) {
      var m = navigator.appVersion.match(/MSIE ([0-9\.]+)/);
      if (m) {
        ieVer = parseInt( m[1] );
      }
      return true;
    }
    ieVer = -1;  // not ie
    return false;
  }
}

/* The first function called after page is loaded. It constructs the top menu.
 */
function Init() {
  // Preload images
  var images = [ "img/filter_bar_bg.png", "img/filter_hover_left.png",
    "img/filter_selected_left.png", "img/filter_hover_right.png",
    "img/filter_selected_right.png" ];
  for (i=0; i<images.length; i++) {
    var tmp = new Image();
    tmp.src = images[i];
  }

  // Create menu
  Menu.setObject( document.getElementById("TopMenuItems") );
  <?php include "inc-menu.php"; ?>
  Menu.draw();
  ResizeContentFrame();

  // Uptime refresh
  getSysInfo('uptime');
  getSysInfo('df');

  // Initializes the infobar
  CycleInfoBar();
  UpdateInfoBarLoop();

  // Disable text selection (for good reasons)
  if (typeof document.onselectstart != "undefined") {
    document.onselectstart = function() { return false; };
  }
  else {
    document.onmousedown = function() { return false; };
    document.onmouseup = function() { return true; };
  }

}

/* Constructor for MenuItem. It contains class definition in JSON.
 */
function MenuItem(label, url) {
  if ((url.indexOf("http://") == 0) || (url.indexOf("https://") == 0)) {
    url_title = label.replace("!search!", "").replace(/\s{2,}/, ' ').replace(/^\s*/, '').replace(/\s*$/, '');
    url = "/openexternal.php?url=" + encodeURIComponent(url) + "&title=" + encodeURIComponent(url_title);
  }
  return {
    label : label,
    url : url
  };
};

/* Resizes iframe.
 */
function ResizeContentFrame() {
  var iframe = Menu.getActiveIframe();
  if (iframe) {
    var height = document.documentElement.clientHeight;
    height -= iframe.offsetTop;
    iframe.style.height = height + "px";
  }
}

/** Cross-browser (i.e. works in IE too) function to generate an AJAX request
 *  handler.
 */
function getXmlHttpRequest() {
  var httpRequest;
  if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (e) {}
    }
  }
  return httpRequest;
}

/** Gets system information asynchronously: uptime and df
 */
function getSysInfo(item) {

  var xhr = getXmlHttpRequest();

  if (!xhr) {
    if (item == 'uptime') uptimeText = "No uptime available.";
    else if (item == 'df') dfText = "No disk free info.";
    return;
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (item == 'uptime') {
        if (xhr.status == 200) uptimeText = "Up for " + xhr.responseText;
        else uptimeText = "No uptime available.";
      }
      else if (item == 'df') {
        if (xhr.status == 200) dfText = "Disk free: " + xhr.responseText;
        else dfText = "No disk free info.";
      }
      setTimeout("getSysInfo(\""+item+"\")", 60000);
    }
  };

  xhr.open("GET", "sysinfo.php?item="+item, true);
  xhr.send("");
}

/** Time before client certificate expiration, or descriptive text in case of
 *  faults
 */
function CertExpText() {
  var msecsExpire = (new Date("<?= $_SERVER["SSL_CLIENT_V_END"] ?>")).getTime() - (new Date()).getTime();
  if (!msecsExpire) return "No cert expiration available!";
  else if (msecsExpire <= 0) return "Cert expired!";  // <-- you should not see this!

  var dd, hh, mm, ss;
  var str;

  ss = Math.round(msecsExpire/1000);

  dd = Math.floor(ss / 86400);
  ss %= 86400;

  hh = Math.floor(ss / 3600);
  ss %= 3600;

  mm = Math.floor(ss / 60);
  ss %= 60;

  return "Cert expires in " + dd + "d " + hh + "h " + mm + "m";
}

/** Disk free
 */
function DiskFreeText() {
  return 'to be implemented ' + new Date();
}

/** Info bar data
 */
var uptimeText = "Fetching uptime...";
var dfText = "Fetching disk free...";
var infoBarContents = new Array(
  "!dfText!",
  "!uptimeText!",
  "<?= (isset($_SERVER["SSL_CLIENT_S_DN_CN"])) ? "SSL auth: " . $_SERVER["SSL_CLIENT_S_DN_CN"] : "No SSL cert auth!" ?>",
  "!CertExpText()!",
  "Your IP: <?= $_SERVER["REMOTE_ADDR"] ?>"
);
var infoBarSelected = -1;
var infoBarExpr = null;

/** Cycle through all available info
 */
function CycleInfoBar() {

  var obj = document.getElementById("InfoBarData");

  infoBarSelected++;
  infoBarSelected %= infoBarContents.length;

  // Is text a variable?
  var text = infoBarContents[infoBarSelected];
  var m = text.match(/^!(.*)!$/);
  if (m) {
    infoBarExpr = m[1];
    text = eval(infoBarExpr);
  }
  else infoBarExpr = null;

  obj.innerHTML = text;

}

/** Update info bar (eventually), loop
 */
function UpdateInfoBarLoop() {
  if (infoBarExpr) {
    var obj = document.getElementById("InfoBarData");
    var val = eval(infoBarExpr);
    if (val != obj.innerHTML) obj.innerHTML = val;
  }
  setTimeout("UpdateInfoBarLoop()", 1000);  
}

/* Events that trigger a resize.
 */
window.onload = ResizeContentFrame;
window.onresize = ResizeContentFrame;

</script>

</head>

<body onload="Init()">

<div id="TopMenu">
  <div id="TopMenuItemsContainer"><ul id="TopMenuItems"></ul></div>
  <div id="InfoBarItemsContainer"><ul id="InfoBarItems"><li><span id="InfoBarData" onclick="CycleInfoBar()"></span></li></ul></div>
</div>

<div id="IFrames"></div>

</body>

</html>
